><

About floating boxes



Floating boxes let you position any object on a page absolutely, so you can use transparent floating boxes to position and animate objects, for example, and to create layered effects. You can also convert floating boxes to text frames.

Floating boxes are based on the DIV element, which has been available since HTML 3.2. HTML 4.0 substantially enhances the DIV element's functionality, allowing it to be absolutely positioned and stacked to accept a background image or background color. The DIV element is also a core element of Dynamic HTML and a major building block for absolute positioning with cascading style sheets.

Note: To display properly, floating boxes require Web browsers version 4.0 or later. Although floating boxes may soon be used as commonly as HTML tables, viewers with older browsers may have trouble viewing pages that contain floating boxes.

Technically, a floating box is a visual representation of a DIV element, usually formatted with a CSS ID style. The ID style specifies the width, visibility, and absolute position of the floating box, instructing the browser to create a subdivision that is not part of the normal flow of HTML code within the page. This property of being absolutely positioned allows floating boxes to be moved.

Floating boxes inherit styles applied to a page using cascading style sheets.

Two concepts are the key to understanding floating boxes:

  • Layering is a key feature. Floating boxes can overlap or even be placed on top of each other. The stacking order is controlled by an attribute called the z-index (z is from the z-axis in a three-dimensional coordinate system). Elements with a higher z-index display on top of elements with a lower z-index. For example, an element with a z-index of 2 appears to float above an element with a z-index of 1.

  • By default, floating boxes are superimposed on the normal flow of HTML and the Adobe GoLive layout grid.

  • As an independent division within the page, a floating box accepts any other HTML element--such as an image or simple HTML text with formatting. It also has the same background image and color properties as an HTML page.

  • Floating boxes can be opaque or transparent to reveal objects in the background. For example, you can use transparent floating boxes to position and animate objects so that they pass in front of and behind each other.


    A. Floating box markers show that this HTML page contains five floating boxes B. Floating box contains a GIF image. C. Floating box animated to move along the curve D. Floating box animated to move along a linear path E. Floating box has a index of 2 and is a GIF file with a transparent background F. Floating box contains text


    Floating Boxes > About floating boxes